<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0">
    <title></title>
    <style>
        html, body, h4{ margin:0; padding:0; } 
        *{text-decoration:none; margin:0; padding:0;outline: none;font-family: '微软雅黑';color: #333;}
        .content{
            background-color: #f5f5f5;
            overflow: hidden;
        }
        .box-row{
            background-color: #fff;
            margin-bottom: 10px;
            padding: 0 15px;
            overflow: hidden;
        }
        .row-cell{
            line-height: 44px;
            position: relative;
            font-size: 14px;
        }
        .row-cell a{
            color: #333;
        }
        .row-cell span{
            display: inline-block;
            width: 58%;
        }
        .row-cell::after{
            content: " ";
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 1px;
            border-top: 1px solid #ebebeb;
            color: #ebebeb;
        }
        .box-row .row-cell:last-child::after{
            display: none;
        }
        .box-title{
            line-height: 54px;
            font-size: 15px;
            padding-left: 15px;
            position: relative;
            font-weight: normal;
        }
        .box-title::after,.box-title::before{
            content: " ";
            width: 4px;
            height: 7px;
            position: absolute;
            left: 0;
        }
        .box-title::before{
            top: 20px;
            background-color: #0EA441;
        }
        .box-title::after{
            bottom: 20px;
            background-color: #2EC461;
        }
        .box-more .more-details{
            height: 110px;
            overflow: hidden;
        }
        .box-more.show .more-details{
            height: auto;
        }
        .more-details>*{
            max-width: 100%;
            height: auto;
        }
        .more-details table{
            width: 100%;
            border-spacing: 0px;
            border-collapse:collapse;
            font-size: 12px;
        }
        .more-details tr td{
            border-width: 1px;
            border-style: solid;
        }
        .more-details tr td:first-child{
            /* width:25px!important */
        }
        .more-btn{
            display: block;
            line-height: 14px;
            text-align: center;
            font-size: 13px;
            color: #ffbb00;
            margin: 10px 0;
        }
        .more-btn::before{
            content: "展开"
        }
        .more-btn::after{
            content: " ";
            display: inline-block;
            height: 8px;
            width: 8px;
            border-right: 1px solid #ffbb00;
            border-bottom: 1px solid #ffbb00;
            transform: rotate(45deg);
            left: 7px;
            position: relative;
            top: -3px;
        }
        .show .more-btn::before{
            content: "收起"
        }
        .show .more-btn::after{
            transform: rotate(225deg);
            top: 2px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
</head>
<body>
    <div class="content" id="app">
        <template v-if="content">
            <div class="box-row">
                <div class="row-cell">
                    <span>办学类型：{{content.sch_type}}</span>学历层次：{{content.sch_edu}}
                </div>
                <div class="row-cell">
                    <span>院校隶属：{{content.sch_ls}}</span>建校时间：{{content.sch_time}}年
                </div>
                <div class="row-cell">院校地址：{{content.sch_address}}</div>
                <div class="row-cell">
                    <span>学生人数：{{content.sch_nums}}</span>院士人数：{{content.sch_rs}}
                </div>
                <div class="row-cell">
                    <span>硕士点个数：{{content.master}}</span>博士点个数：{{content.doctor}}
                </div>
                <div class="row-cell">官方网站：<a :href="content.sch_web">{{content.sch_web}}</a></div>
                <div class="row-cell">招生网站：<a :href="content.zs_web">{{content.zs_web}}</a></div>
            </div>
            <div class="box-row">
                <h4 class="box-title">院校简介</h4>
                <div class="box-more" :class="{ show: showstu[0].stu }">
                    <div class="more-details" v-html="content.sch_desc"></div>
                    <a class="more-btn" @click="showstu[0].stu=!showstu[0].stu"></a>
                </div>
                <h4 class="box-title">特色专业</h4>
                <div class="box-more" :class="{ show: showstu[1].stu }">
                    <div class="more-details" v-html="content.sch_zy"></div>
                    <a class="more-btn" @click="showstu[1].stu=!showstu[1].stu"></a>
                </div>
                <h4 class="box-title">院系设置</h4>
                <div class="box-more" :class="{ show: showstu[2].stu }">
                    <div class="more-details" v-html="content.yx_set"></div>
                    <a class="more-btn" @click="showstu[2].stu=!showstu[2].stu"></a>
                </div>
                <h4 class="box-title">师资力量</h4>
                <div class="box-more" :class="{ show: showstu[3].stu }">
                    <div class="more-details" v-html="content.szll"></div>
                    <a class="more-btn" @click="showstu[3].stu=!showstu[3].stu"></a>
                </div>
            </div>
        </template>
    </div>
</body> 
<script>
var app = new Vue({
    el: '#app',
    data: {
        content: null,
        showstu:[{
            stu:false
        },{
            stu:false
        },{
            stu:false
        },{
            stu:false
        }]
    },
    created: function () {
        let query =window.location.href.split('?')[1]
        let id='1'
        if(query){
            if (query.split('=')[1]&&query.split('=')[0]=='id') {
                id=query.split('=')[1]
            }
        }
        fetch('http://jy.sanzhima.cn/admin.php/api/homepage/school_detail', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                school_id:id,
            })
        })
        .then(res => res.json())
        .then(data => {
            this.content=data.data
        })
    }
})
</script>
</html>